<template>
  <section class="main">
    <div class="header">
      <div class="back" @click="back">
        <van-icon name="arrow-left" size="0.48rem" />
      </div>
      <div class="userregtitle">
        <span>用户注册</span>
      </div>
      <div class="more">
        <van-icon name="ellipsis" size="0.4rem" />
      </div>
    </div>
    <div class="regbody">
      <div data-v-5a69896a class="loginItem">
        <div class="loginIcon">
          <van-icon name="friends" size="0.4rem" />
        </div>
        <input data-v-5a69896a type="text" placeholder="用户名" v-model.trim="phone" @input="text" />
        <i
          data-v-5a69896a
          class="van-icon van-icon-cross"
          style="font-size: 0.4rem; display: none;"
        >
          <!---->
        </i>
      </div>
      <div data-v-5a69896a class="loginItem">
        <div data-v-5a69896a class="loginIcon">
          <i data-v-5a69896a class="van-icon van-icon-lock" style="font-size: 0.4rem;">
            <!---->
          </i>
        </div>
        <input
          data-v-5a69896a
          type="text"
          placeholder="图片验证码"
          v-model.trim="verification"
          @input="text"
        />
        <SIdentify :identifyCode="identifyCode" @click.native="refreshCode" />
      </div>
      <div data-v-5a69896a class="loginItem">
        <div class="loginIcon">
          <van-icon name="setting-o" size="0.4rem" />
        </div>
        <input
          data-v-5a69896a
          type="text"
          placeholder="设置密码"
          v-model.trim="passwordA"
          @input="text"
        />
        <i
          data-v-5a69896a
          class="van-icon van-icon-cross"
          style="font-size: 0.4rem; display: none;"
        >
          <!---->
        </i>
      </div>
      <div data-v-5a69896a class="loginItem">
        <div class="loginIcon">
          <van-icon name="setting-o" size="0.4rem" />
        </div>
        <input
          data-v-5a69896a
          type="text"
          placeholder="确认密码"
          v-model.trim="passwordB"
          @input="text"
        />
        <i
          data-v-5a69896a
          class="van-icon van-icon-cross"
          style="font-size: 0.4rem; display: none;"
        >
          <!---->
        </i>
      </div>
      <div data-v-63c679ac class="regcheckbox" style="margin-top: 20px;">
        <span
          data-v-2e56c757
          data-v-63c679ac
          :class="['checkbox',{'checked':checked}]"
          @click="regbtenchange"
        ></span>
        <span data-v-63c679ac style="margin-left: 6px;" class="qaq">
          我已阅读并同意
          <a data-v-63c679ac href="/doc/1/44" class="blue">《九机用户协议》</a>
        </span>
      </div>
      <a :class="['regbtn',{'btnred':all}]" @click="regbtn">
        <span>注册</span>
      </a>
    </div>
    <div :class="['regtis',{'opacity':opacity}]">{{tips}}</div>
  </section>
</template>
<script>
import SIdentify from "../components/SIdentify";
import $ from "../../node_modules/jquery/dist/jquery";
export default {
  name: "Login",
  components: { SIdentify },
  data() {
    return {
      phone: "",
      verification: "",
      passwordA: "",
      passwordB: "",
      checked: false,
      identifyCodes: "1234567890AbCDEFGHIJKLMNOPQRSTUVWXYZ", // 验证码字符的集合
      identifyCode: "",
      all: false,
      tips: "",
      opacity: false
    };
    
  },
  
  methods: {
    
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      //   window.console.log(this.identifyCode)
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    regbtenchange() {
      this.checked = !this.checked;
    },
    back() {
      this.$router.go(-1);
    },
    text() {
      // window.console.log("1")
      if (this.phone && this.verification && this.passwordA && this.passwordB) {
        this.all = true;
      } else {
        this.all = false;
      }
    },
    regbtn() {
      let rphone = /^[A-Za-z0-9]{3,9}$/;
      let rpassword = /^[A-Za-z0-9]{3,9}$/;
      this.opacity = true;
      setTimeout(() => {
        this.opacity = false;
      }, 800);
      if (this.checked) {
        if (
          this.phone &&
          this.verification &&
          this.passwordA &&
          this.passwordB
        ) {
          if (!rphone.test(this.phone)) {
            this.tips = "请输入正确的用户名！";
          } else if (this.identifyCode.toLowerCase() != this.verification.toLowerCase()) {
            this.tips = "请输入正确的验证码！";
          } else if (!rpassword.test(this.passwordA)) {
            this.tips = "请输入正确的密码！";
          } else if (this.passwordA != this.passwordB) {
            this.tips = "两次密码不一样！";
          } else {
            $.ajax({
              type: "post",
              url: "user/reg",
              data: {
                username: this.phone,
                password: this.passwordA
              },
               dataType: "json",
            success(){
              window.location.href="#/login";
            }
            });
            this.tips = "注册成功";
          }
        } else {
          this.tips = "请完善信息！";
        }
      } else {
        this.tips = "请阅读并同意协议";
      }
    }
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
    window.console.log(this.identifyCode)
  }
};
</script>

<style>
.userregtitle {
  font-size: 0.36rem;
  line-height: 0.88rem;
  float: left;
  margin-left: 2rem;
}
.regbody {
  margin: 0.4rem;
}
.van-icon-lock,
.van-icon-setting-o,
.van-icon-friends {
  padding-bottom: 0.6rem;
  padding-right: 0.2rem;
}
.regbtn {
  background-color: #dfdfdf;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 0.9rem;
  margin: 0.4rem;
  margin-top: 0.8rem;
  border-radius: 0.9rem;
}
.regbtn span {
  font-size: 0.32rem;
  color: white;
}
.checkbox[data-v-2e56c757] {
  zoom: 0.8;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 100%;
  position: relative;
  width: 20px;
  height: 20px;
}
.checked[data-v-2e56c757] {
  border-color: rgb(242, 28, 28);
  zoom: 0.8;
  background: rgb(242, 28, 28);
}
.checkbox.checked[data-v-2e56c757]:after {
  border-color: rgb(242, 28, 28);
  background: rgb(242, 28, 28);
  content: "";
  display: block;
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin: 5px auto;
}
.regcheckbox {
  font-size: 0.28rem;
}
.qaq {
  display: inline-block;
  margin-bottom: 0.2rem;
}
.btnred {
  background: red;
}
.regtis {
  width: 3rem;
  height: 0.88rem;
  font-size: 0.24rem;
  color: #ccc;
  background: #181717;
  text-align: center;
  line-height: 0.88rem;
  opacity: 0.8;
  position: absolute;
  top: 50%;
  left: 30%;
  display: none;
}
.opacity {
  display: block;
}.loginItem {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dfdfdf;
}.loginItem input {
  display: block;
  flex: 1;
  height: 0.83rem;
  border: 0;
  outline: none;
  font-size: 0.28rem;
  color: #333;
}
.loginItem a {
  padding: 0.14rem;
  border-radius: 0.08rem;
  border: 0.02rem solid #78b;
  color: #78b;
  font-size: 0.24rem;
}
.loginItem span {
  color: #6b6b6b;
  font-size: 0.28rem;
}
</style>